<template>
  <div>
    <el-card class="box-card" style="opacity: 0.8;">
      <!-- 卡片头信息 -->
      <div slot="header" class="clearfix">
        <i class="el-icon-menu"></i>
        <span>项目分类</span>
      </div>
      <!-- 模糊查询搜索框 -->
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="selectCg" @clear="clearInp" clearable>
          <template slot="prepend">分类关键字查询</template>
        </el-input>
        <el-button slot="append" type="primary" icon="el-icon-search" @click="selectAllLikeCname">搜索</el-button>
      </div>
      <el-divider></el-divider>
      <!-- 表格 -->
      <div style="margin-top: 30px">
        <el-table :data="cgList" border style="width: 100%">
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="cname" label="分类名称" width="700px"></el-table-column>
          <el-table-column prop="cintro" label="简介" width="700px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="toUpdateCategory(scope.row.cid)" circle></el-button>
              <el-popconfirm confirm-button-text='确认' cancel-button-text='取消删除'
                             icon="el-icon-info" icon-color="red" title="确认删除该条分类信息吗？" @confirm="trueCon(scope.row.cid)" @cancel="falseCon">
                <el-button type="danger" icon="el-icon-delete" slot="reference" circle></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <center style="margin-top: 30px">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="listTotal" :page-size="5" :current-page="pageNum" @current-change="pageNumChange">
        </el-pagination>
      </center>
    </el-card>


    <el-dialog title="分类详情信息" :visible.sync="dialogFormVisible">
      <el-form :data="updateCg">
        <el-form-item label="分类名称"><el-input autocomplete="off" v-model="updateCg.cname"></el-input></el-form-item>
        <el-form-item label="分类介绍">
			<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" autocomplete="off"  v-model="updateCg.cintro"></el-input>
			<!-- <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" style="width: 800px" v-model="addItem.iintro"> -->
		</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false" round>返回</el-button>
        <el-button type="success" @click="updateCategory(updateCg.cid)" round>修改</el-button>
      </div>

    </el-dialog>


  </div>
</template>

<script>
export default {
  data() {
    return{
      cgList:[],
      selectCg:"",
      pageNum:1,
      listTotal:0,
      updateCg:{
        cname:"",
        cintro:""
      },
      dialogFormVisible:false
    }
  },
  methods:{
    async selectAllLikeCname(){
      let param = new URLSearchParams();
      param.append("pageNum",this.pageNum);
      param.append("cname",this.selectCg);
	  console.log(this.selectCg)
      let res = await this.$http.post("selectAllLikeCname",param);
      if (res.data.code == 200) {
        this.cgList = res.data.data.list;
        this.listTotal = res.data.data.total;
      }
    },
    clearInp() {
      this.selectAllLikeCname();
    },
    async trueCon(cid) {
      let res = await this.$http.get("deleteCategory?cid="+cid);
      if (res.data.code == 200) {
        await this.selectAllLikeCname();
        this.$message.success(res.data.message);
      }
    },
    falseCon() {
      this.$message.info("已取消删除")
    },
    pageNumChange(newPageNum) {
      this.pageNum = newPageNum;
      this.selectAllLikeCname();
    },
    async toUpdateCategory(cid) {
      let res = await this.$http.get("selectItemCategoryByCid?cid="+cid);
      if (res.data.code == 200) {
        this.updateCg = res.data.data;
        this.dialogFormVisible = true;
      }
    },
    async updateCategory(cid) {
      let param = new URLSearchParams();
      param.append("cname",this.updateCg.cname);
      param.append("cintro",this.updateCg.cintro);
      param.append("cid",cid);
      let res  = await this.$http.post("updateCategoryByCid",param);
      if (res.data.code == 200) {
        this.updateCg = {};
        this.$message.success(res.data.message);
      }else {
        this.$message.error(res.data.message);
      }
      this.dialogFormVisible = false;
      await this.selectAllLikeCname();
    }
  },
  mounted() {
    this.selectAllLikeCname();
  }
}
</script>

<style scoped>
.el-table {
	
}
</style>